<template>
  <el-aside width="200px">
    <el-scrollbar>
      <h3 style="color: #fff;text-align: center;">厚溥云课堂管理系统</h3>
      <el-menu router class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#545c64" :default-active="route.path"
        text-color="#fff">
        <template v-for="menu in menus" :key="menu.path">
          <el-sub-menu v-if="!menu.hidden" :index="menu.path">
            <template #title style="width: 200px;">
              <el-icon>
                <component :is='menu.meta.icon'></component>
              </el-icon>{{ menu.meta.title }}
            </template>
            <el-menu-item v-for="subitem in menu.children" :key="menu.path + subitem.path"
              :index="`${menu.path}/${subitem.path}`">{{ subitem.meta.title }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const menus = router.options.routes

</script>